<template>
  <div>
    <div class="header flex-justify-between">
      <div class="flex-align-center">
        <button class="btn btn-bg2">添加等级</button>
      </div>
      <div class="search flex-align-center">
        <span>查询条件</span>
        <el-input v-model="input" placeholder="关键词搜索" class="input-with-select">
          <template #append>
            <el-button :icon="Search" />
          </template>
        </el-input>
      </div>
    </div>
    <div class="table-list">
      <el-table border stripe resizable>
        <el-table-column show-overflow-tooltip prop="date" label="等级名称" />
        <el-table-column show-overflow-tooltip prop="name" label="供应商数量" width="170" />
        <el-table-column show-overflow-tooltip prop="name" label="最后更新时间" width="170" />
        <el-table-column show-overflow-tooltip fixed="right" label="操作" width="60">
          <template #default="scope">
            <div class="flex-center">
              <button class="btn-table bgColor2">详细</button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import { Search } from '@element-plus/icons-vue'

  const input = ref('')
</script>

<style scoped lang="scss">
  @import '../../index.scss';
</style>
